<template>
  <el-card class="box-card">
    <div class="user">
      <div class="user-tit">
        <el-row>
          <el-col :span="12">
            <div class="user-left">
              <el-button size="small" type="primary" @click="user_new" icon="el-icon-plus">新建</el-button>
              <el-button size="small" type="info" @click="user_revamp" icon="el-icon-edit">修改</el-button>
              <el-button size="small" type="danger" @click="user_del" icon="el-icon-delete">删除</el-button>
            </div>
          </el-col>
          <el-col :span="6" :offset="6">
            <div class="user-right">
              <el-input placeholder="请输入内容" v-model.trim="name" @keyup.enter.native="user_search">
                <i slot="suffix" class="el-input__icon el-icon-search" @click="user_search"></i>
              </el-input>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="user-list">
        <el-table :data="userTable" stripe border style="width: 100%" @selection-change="checkboxChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column type="index" :index="indexMethod" label="序号" width="80"></el-table-column>
          <el-table-column prop="account" label="用户名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="userName" label="登录名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="superadmin" label="是否管理员" show-overflow-tooltip :formatter="usertypeDic"></el-table-column>
          <el-table-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="zhdlsj" :formatter="formatterData" label="最后登录时间" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="user-page fr">
          <el-pagination @current-change="handleCurrentChange" :current-page.sync="currPage" :page-size="limit" layout="total, prev, pager, next" :total="totalCount" style="margin:20px 0"></el-pagination>
        </div>
      </div>
      <user-listdialognew :newModal="newModal" :activeTab="activeTab" @newToggle="newToggle" :textTit="textTit" :userData="userData" @addevent="addevent"></user-listdialognew>
      <!-- <xzqhor-bm-modal  @xzqhOrToggle="xzqhOrToggle" :xzqhModel="xzqhModel" :jsdwStr="jsdwStr"></xzqhor-bm-modal> -->
    </div>
  </el-card>
</template>
<script>
import userListdialognew from "./user-listdialognew";
// import xzqhorBmModal from "./xzqhorBmModal";
import { getUserList, deleteUserByIds } from "@/api/share/user";
import { formatDate } from "@/utils/data";
import { getDicTab } from "@/utils/config";
export default {
  components: {
    userListdialognew
  },
  data() {
    return {
      newModal: false,
      checkBox: 0,
      activeTab: "first",
      textTit: "",
      userId: "",
      name: "",
      currPage: 1,
      limit: 10,
      totalCount: 0,
      userData: {},
      userTable: []
    };
  },
  methods: {
    remarkDic(row) {
      return getDicTab("remark", row);
    },
    addevent(val) {
      this.user_search();
    },
    user_new() {
      this.newModal = true;
      this.textTit = "新建";
      this.userId = "";
      this.userData = {};
    },
    newToggle(val) {
      this.newModal = val;
    },
    user_revamp() {
      let that = this;
      this.textTit = "修改";
      this.suer_public("newModal");
      if (this.checkBox.length) {
        that.userData = Object.assign({}, that.checkBox[0]);
        that.userId = this.checkBox[0].id;
      }
    },
    // 删除用户
    user_del() {
      let userArr = [];
      let qData = {};
      if (!this.checkBox || this.checkBox.length === 0) {
        this.$alert(
          "<i class='el-icon-info'></i> 请选择要删除的用户!",
          "提示",
          {
            dangerouslyUseHTMLString: true
          }
        );
      } else {
        this.$confirm("你确定删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let that = this;
            this.checkBox.map((i) => {
              userArr.push({ ids: i.account });
            });
            qData.deleteIds = userArr;
            deleteUserByIds(qData).then((res) => {
              let data = res.data;
              if (data.msg === "success") {
                that.user_search();
                that.$message({
                  type: "success",
                  message: data.msg
                });
              } else {
                that.$message({
                  type: "error",
                  message: data.msg
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    suer_public(modal) {
      if (!this.checkBox || this.checkBox.length === 0) {
        this.$alert("<i class='el-icon-info'></i> 请选择用户!", "提示", {
          dangerouslyUseHTMLString: true
        });
        return false;
      } else if (this.checkBox.length > 1) {
        this.$alert("<i class='el-icon-info'></i> 只能选择一个用户!", "提示", {
          dangerouslyUseHTMLString: true
        });
        return false;
      }
      this[modal] = true;
    },
    // 查询
    user_search() {
      let that = this;
      let obj = {
        currPage: this.currPage,
        limit: this.limit,
        order: [{ type: "desc", columnName: "creationDate" }],
        filter: { "+userName": this.name }
      };
      getUserList(obj).then((res) => {
        let data = res.data;
        if (data.msg === "success") {
          that.userTable = data.result;
          that.totalCount = data.totalCount;
        } else {
          that.userTable = [];
          that.totalCount = 0;
          this.$message({
            type: "error",
            message: data.msg
          });
        }
      });
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.user_search();
    },
    indexMethod(index) {
      let start = (this.currPage - 1) * this.limit;
      return start + index + 1;
    },
    formatterData(row) {
      if (row.creationDate) {
        return formatDate(row.creationDate, "yyyy-MM-dd");
      }
    },
    usertypeDic(row) {
      if (row.superadmin === "1") {
        return "是";
      }
      return "否";
      // return getDicTab('role', row.rId)
    },
    checkboxChange(checkBoxVal) {
      this.checkBox = checkBoxVal;
    }
  },
  mounted: async function () {
    await this.user_search();
  }
};
</script>

<style lang="scss" scoped>
.user {
  .user-tit {
    margin: 10px 0;
    .user-left {
      span {
        color: #fff;
        width: 70px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        border-right: 1px solid #fff;
        margin: 10px 0;
      }
    }
    .user-right {
      position: relative;
    }
  }
}
</style>
<style lang="scss">
.user {
  .user-right {
    margin-right: 4px;
    .el-input__inner {
      background: #fff;
      height: 32px;
      margin-top: 3px;
    }

    .el-button {
      position: absolute;
      top: 0;
      right: 0;
      border: none;
      height: 36px;
    }
  }

  .el-icon-search {
    cursor: pointer;
  }
}
</style>


